<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/WEB-INF/facelets/templateServicio.xhtml">

		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>

				<h:form id="form">

					<p:panel id="panel2" header="Criterios de busqueda">

						<p:growl id="msg2" autoUpdate="true" />

						<h:panelGrid style="margin: 0 auto;">

							<h:panelGrid style="margin: 0 auto;" columns="6">

								<h:outputText id="msgTipoSolicitud" value="Tipo Solicitud:" />
								<p:selectOneMenu id="txtTipoSolicitud" style="width:140px"
									binding="#{solicitudPqrView.txtIdTpSolPqr_TipoSolicitudPqr}">
									<f:selectItem itemLabel="Seleccione" itemValue="0" />
									<f:selectItems value="#{solicitudPqrView.tipoSolicitudes}" />
								</p:selectOneMenu>
								<br />

								<h:outputText id="msgEstado" value="Estado:" />
								<p:selectOneMenu id="txtTipoEstado" style="width:140px"
									binding="#{solicitudPqrView.txtIdTpEstPqr_TipoEstadoPqr}">
									<f:selectItem itemLabel="Seleccione" itemValue="0" />
									<f:selectItems value="#{solicitudPqrView.tipoEstados}" />
								</p:selectOneMenu>
								<br />

								<h:outputText id="msgFechaInicio"
									value="Fecha Radicación Desde:" />
								<p:calendar showOn="button" navigator="true" id="txtFechaInicio"
									binding="#{solicitudPqrView.txtFechaCreacion}" required="true"
									requiredMessage="La Fecha Desde es requerida" size="15" />
								<p:message for="txtFechaInicio" display="icon" />

								<h:outputText id="msgFechaFin" value="Fecha Radicación Hasta:" />
								<p:calendar showOn="button" navigator="true" id="txtFechaFin"
									binding="#{solicitudPqrView.txtFechaFin}" size="15"
									required="true" requiredMessage="La Fecha Hasta es requerida" />
								<p:message for="txtFechaFin" display="icon" />

								<h:outputText id="msgNumeroRadicacion"
									value="Número Radicación:" />
								<p:inputText id="txtNumeroRadicacion"
									binding="#{solicitudPqrView.txtNumeroRadicacion}"
									maxlength="10">
								</p:inputText>
								<br />

								<p:commandButton id="ConsultarButton" value="Consultar"
									icon="ui-icon-newwin" update=":form:tabla"
									action="#{solicitudPqrView.consultarSolicitudes}" />

							</h:panelGrid>

							<br />

							<p:dataTable id="tabla"
								value="#{solicitudPqrView.dataSolicitudes}" var="solicitud"
								selection="#{solicitudPqrView.selectedSolicitudDto}"
								paginator="true">

								<f:facet name="header">
							    Solicitudes
							    </f:facet>

								<p:column selectionMode="single" style="width:2%" />


								<p:column>
									<f:facet name="header">
										<h:outputText value="#Radicación" />
									</f:facet>
									<h:outputText value="#{solicitud.numeroRadicacion}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Tipo Solicitud" />
									</f:facet>
									<h:outputText value="#{solicitud.descTpSol}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Fecha Radicación" />
									</f:facet>
									<h:outputText value="#{solicitud.fechaRadicacion2}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Estado" />
									</f:facet>
									<h:outputText value="#{solicitud.descEstado}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Area con el caso" />
									</f:facet>
									<h:outputText value="#{solicitud.nombreArea}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputText value="Fecha Respuesta" />
									</f:facet>
									<h:outputText value="#{solicitud.fechaRespuesta2}" />
								</p:column>


								<f:facet name="footer">
									<p:commandButton id="VerButton" value="Ver Datos Solicitud"
										action="#{solicitudPqrView.action_datos}"
										icon="ui-icon-newwin" update=":form" />
								</f:facet>

							</p:dataTable>

							<p:panel header="Exportar XLS">
								<p:commandLink ajax="false">
									<p:graphicImage value="/images/excel.png" width="35" />
									<p:dataExporter type="xls" target="tabla"
										fileName="solicitudes" />
								</p:commandLink>
							</p:panel>

							<p:dialog id="dialogo" position="top"
								header="Detalle Solicitud PQR" modal="true"
								widgetVar="singleCarDialog" resizable="false" showEffect="fade"
								hideEffect="explode" closable="false">

								<p:growl id="msg" />

								<h:panelGrid id="panelBotones" columns="3"
									style="margin: 0 auto;">

									<p:commandButton id="btnCerrar" value="Cerrar"
										icon="ui-icon-close" update=":form"
										oncomplete="PF('singleCarDialog').hide()" process="@this">
										<p:resetInput target="paneltt" />
									</p:commandButton>

								</h:panelGrid>

								<br />

								<p:panel id="paneltt">

									<p:panel id="toggleable2" header="Datos Solicitud"
										toggleable="true" widgetVar="paneld">

										<h:panelGrid id="panelDatos" columns="4"
											style="margin: 0 auto;">

											<h:outputText value="Fecha de Radicación:" />
											<p:inputText binding="#{solicitudPqrView.txtfechaRadicacion}"
												readonly="true" />

											<h:outputText value="NIT de la Empresa:" />
											<p:inputText binding="#{solicitudPqrView.txtNitEmpresa}"
												readonly="true" />

											<h:outputText value="Nombre Empresa:" />
											<p:inputText binding="#{solicitudPqrView.txtNombreEmpresa}"
												readonly="true" />

											<h:outputText value="Nombre Contacto:" />
											<p:inputText binding="#{solicitudPqrView.txtNombreContacto}"
												readonly="true" />

											<h:outputText value="Correo Electronico:" />
											<p:inputText
												binding="#{solicitudPqrView.txtCorreoElectronico}"
												readonly="true" />

											<h:outputText value="Celular:" />
											<p:inputText binding="#{solicitudPqrView.txtCelular}"
												readonly="true" />

											<h:outputText value="Teléfono Fijo:" />
											<p:inputText binding="#{solicitudPqrView.txtTelefonoFijo}"
												readonly="true" />

										</h:panelGrid>

										<br />

										<h:panelGrid id="panelDatos2" columns="1"
											style="margin: 0 auto;">

											<h:outputText value="Breve Descripción del caso:" />
											<p:inputTextarea
												binding="#{solicitudPqrView.txtDescripcionCaso}"
												readonly="true" autoResize="false" style="width:600px" />

										</h:panelGrid>

									</p:panel>

									<br />

									<p:panel id="toggleableServicio" header="Solicitud"
										toggleable="true" widgetVar="panelServicio" collapsed="true">


										<h:panelGrid columns="1">

											<h:outputText value="Servicio al Cliente" />
											<br />

											<h:panelGrid columns="2">

												<h:outputText value="Observaciones:" />

												<h:outputText value="Anexos:" />
												<p:inputTextarea
													binding="#{solicitudPqrView.txtObservaciones}"
													autoResize="false" style="width:350px" />

												<p:dataTable value="#{solicitudPqrView.anexos}"
													var="anexoDTO" id="tablaAnexos">
													<p:column headerText="Descripción Anexo">
														<h:outputText value="#{anexoDTO.descripcionAnexo}" />
													</p:column>

													<p:column headerText="Archivo">
														<p:fileUpload id="upload" required="true"
															requiredMessage="No ha seleccianado ningun archivo"
															fileUploadListener="#{solicitudPqrView.handleFileUpload}"
															cancelLabel="Cancelar" uploadLabel="Adjuntar"
															label="Seleccionar" mode="advanced"
															dragDropSupport="false" sizeLimit="10000000"
															fileLimit="1" update=":form:msg, check"
															allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|xps)$/"
															invalidSizeMessage="Archivo muy pesado"
															fileLimitMessage="El limite de Archivos adjuntos es 1"
															invalidFileMessage="El archivo adjuntado no es compatible" />

													</p:column>

													<p:column headerText="Adjuntado?">
														<p:selectBooleanCheckbox id="check" disabled="true"
															binding="#{solicitudPqrView.check}" />
													</p:column>
												</p:dataTable>

											</h:panelGrid>

										</h:panelGrid>

									</p:panel>

									<h:panelGrid columns="3" style="margin: 0 auto;">

										<h:outputText value="Area Asignada:" />

										<p:selectOneMenu style="width:140px"
											binding="#{solicitudPqrView.txtIdArea}">
											<f:selectItem itemLabel="Seleccione" itemValue="0" />
											<f:selectItems value="#{solicitudPqrView.areas}" />
										</p:selectOneMenu>

										<p:commandButton id="btnEnviar" value="Enviar"
											icon="ui-icon-check" update=":form"
											binding="#{solicitudPqrView.btonEnviar}"
											action="#{solicitudPqrView.enviar}" />

									</h:panelGrid>

									<p:panel id="toggleable" header="Ciclos" toggleable="true"
										widgetVar="panel" collapsed="true">

										<p:dataTable value="#{solicitudPqrView.respuestasSolicitud}"
											var="respuestaDTO" id="tablaRespuestas">

											<p:column style="width:16px">
												<p:rowToggler />
											</p:column>

											<p:column filterBy="#{respuestaDTO.descObservacion}"
												sortBy="#{respuestaDTO.descObservacion}">
												<f:facet name="header">
													<h:outputText value="Descripción Observación" />
												</f:facet>
												<h:outputText value="#{respuestaDTO.descObservacion}" />
											</p:column>

											<p:column filterBy="#{respuestaDTO.area}"
												sortBy="#{respuestaDTO.area}">
												<f:facet name="header">
													<h:outputText value="Area Involucrada" />
												</f:facet>
												<h:outputText value="#{respuestaDTO.area}" />
											</p:column>

											<p:column filterBy="#{respuestaDTO.fecha}" 
												sortBy="#{respuestaDTO.fecha}">
												<f:facet name="header">
													<h:outputText value="Fecha" />
												</f:facet>
												<h:outputText value="#{respuestaDTO.fecha}" />
											</p:column>

											<p:rowExpansion>
												<p:panelGrid columns="2" columnClasses="label,value"
													style="width:300px">
													<p:dataTable value="#{respuestaDTO.anexos}"
														var="respuestaAnexosDTO" id="tablaRespuestasAnexos">

														<p:column headerText="Nombre Archivo">
															<h:outputText value="#{respuestaAnexosDTO.nombreAnexo}" />
														</p:column>

														<p:column headerText="Archivo">
															<p:commandButton value="Descargar" ajax="false"
																onclick="PrimeFaces.monitorDownload(start, stop);"
																icon="ui-icon-arrowthick-1-s">

																<p:fileDownload
																	value="#{solicitudPqrView.crearArchivo(respuestaAnexosDTO)}" /> 
															</p:commandButton>
														</p:column>

													</p:dataTable>


												</p:panelGrid>
											</p:rowExpansion>

										</p:dataTable>

									</p:panel>

								</p:panel>

							</p:dialog>

						</h:panelGrid>

					</p:panel>

				</h:form>

			</f:view>
		</ui:define>

	</ui:composition>

</h:body>

</html>